<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea v-model="content" placeholder="请输入要评论的内容（最多120字）" maxlength="120" name=""></textarea>
        <mt-button @click="postComment" size="large" type="primary">发表</mt-button>

        <div class="cmt-list">
            <div v-for="(item, i) in commentData" :key="item.id" class="cmt-item">
                <div class="cmt-title">
                    第{{ i+1 }}楼 用户：{{ item.user_name }} 发表时间：{{ item.add_time }}
                </div>
                <div class="cmt-body">
                    {{ item.content === 'undefined' ? '此用户很懒，什么都没说' : item.content }}
                </div>
            </div>
        </div>

        <mt-button @click="getMore" size="large" type="danger" plain>加载更多</mt-button>
    </div>
</template>

<script>

import $ from "jquery";
export default {
  data() {
    return {
      commentData: [], // 所有的评论数据
      pageIndex: 1, // 默认展示第一页数据
      username: "匿名用户",
      content: "" // 评论输入的内容
    };
  },
  created() {
    this.getComments();
  },
  methods: {
    getComments() {
      // 获取评论
      this.$http
        .jsonp(
          '?s=App.Table.FreeQuery&model_name=comments&where=[["cid", "=", ' +
            this.id +
            "]]&page=" +
            this.pageIndex +
            "&perpage=10&app_key=4F07D528AB07EE72BD7F7C9263BD6705"
        )
        .then(result => {
          if (result.body.ret === 200) {
            this.commentData = this.commentData.concat(result.body.data.list);
          } else {
            Toast("加载评论失败");
          }
        });
    },
    getMore() {
      // 加载更多评论
      this.pageIndex++;
      this.getComments();
    },
    postComment() {
      // 校验是否为空内容
      if (this.content.trim().length === 0) {
        return Toast("评论内容不能为空！");
      }

      // 发表评论
      // 参数1： 请求的URL地址
      // 参数2： 提交给服务器的数据对象 { content: this.msg }
      // 参数3： 定义提交时候，表单中数据的格式  { emulateJSON:true }

      $.ajax({
        url:
          'https://hn2.api.okayapi.com/?s=App.Table.Create&model_name=comments&data={"user_name":"' + this.username + '","cid":"' + this.$route.params.id + '","content":"' + this.content + '"}&app_key=4F07D528AB07EE72BD7F7C9263BD6705',
        type: "POST",
        dataType: "jsonp",
        success: function(res) {
          console.log(res);
          if (res.ret === 200) {
            // 1. 拼接出一个评论对象
            // var cmt = {
            //   user_name: this.username,
            //   add_time: Date.now(),
            //   content: this.content
            // }
            // this.commentData.unshift(cmt);
            this.content = "";
            Toast("评论成功");
          }
        }
      });
    }
  },
  props: ["id"]
};
</script>

<style lang="less" scoped>
.cmt-container {
  padding: 20px;
  h3 {
    font-size: 16px;
  }
  .cmt-list {
    margin-top: 10px;
    .cmt-item {
      .cmt-title {
        font-size: 12px;
        background-color: #e5e5e5;
        padding: 0 10px;
        line-height: 28px;
      }
      .cmt-body {
        font-size: 14px;
        padding: 10px;
        text-indent: 2em;
      }
    }
  }
}
</style>